<template>
  <div id="personlist">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础信息</el-breadcrumb-item>
      <el-breadcrumb-item><b>单位名册</b></el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :style="mystyle" v-if="treedata.length>0">
        <el-scrollbar style="height: calc(100% + 40px);overflow:hidden;">
          <h1 style="padding-top:0">选择单位</h1>

            <div style="clear:both;margin:10px 0;">
              <el-input
                v-model="filterText"
                placeholder="输入关键字进行过滤"
                style="width:220px;margin-right:10px;float:left"
              />
              <template>
                <el-button v-if="selectAllBtn" type="primary" @click="selectTree(1)">全选</el-button>
                <el-button v-else type="primary" plain @click="selectTree(0)">取消</el-button>
              </template>
            </div>
            <el-tree
              ref="tree"
              show-checkbox
              node-key="id"
              :expand-on-click-node="false"
              :data="treedata"
              :filter-node-method="filterNode"
            />
            <el-button type="success" @click="exportExcel" style="margin:20px;">导出</el-button>
        </el-scrollbar>
      </el-col>
      <el-col :style="mystyle" v-else>
        <h1 style="padding-top:0">未授权</h1>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  data () {
    return {
      filterText: '',
      selectAllBtn: true,
      mystyle: 'overflow:hidden;background:#fff;border-radius:5px;margin:0 10px 0; padding:20px;width: calc(100%);height:' + 700 + 'px',
      userRoles: '',
      treedata: []
    }
  },
  methods: {
    exportExcel () {
      if (this.$refs.tree.getCheckedKeys().filter(item => item < 1000).length === 0) {
        this.$message({
          message: '至少选择一家单位',
          type: 'error'
        })
      } else {
        window.open(this.$http.defaults.baseURL + this.$http.defaults.personListAPI + 'api/personList/exportPersonList?ids=' + this.$refs.tree.getCheckedKeys().filter(item => item < 1000).join(','))
      }
    },
    getUnits () {
      this.$http
        .get(this.$http.defaults.personListAPI + 'api/personList/unitNodes')
        .then(response => {
          if (response.data.success === true) {
            this.treedata = response.data.result
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    selectTree (flag) {
      if (this.$refs.tree) {
        if (flag) {
          this.selectAllBtn = false
          const keys = []
          for (let i = 0; i < this.treedata.length; i++) {
            keys.push(this.treedata[i].id)
          }
          console.log(keys)
          this.$refs.tree.setCheckedKeys(keys)
        } else {
          this.selectAllBtn = true
          this.$refs.tree.setCheckedKeys([])
          var nodes = this.$refs.tree.store.nodesMap
          for (var i in nodes) {
            nodes[i].expanded = false
          }
        }
      }
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    mainheight (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.mystyle = 'overflow:hidden;background:#fff;border-radius:5px;margin:0 10px; padding:20px;width: calc(100%);height:' + (clientHeight - 150) + 'px'
    },
    inRoles (str) {
      let arr = this.userRoles
      if (arr.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    }
  },
  mounted () {
    this.mainheight(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.mainheight(_this)
    }
    this.userRoles = JSON.parse(localStorage.getItem('Roles'))
    console.log(this.userRoles)
    this.getUnits()
    this.selectTree(0)
  }
}
</script>
<style scoped>
h1{
  color:#206ab7;
  font-size:18px;
  line-height: 36px;
}
.index_icon{
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.grouplist li{
  list-style: none;
  font-family: '宋体';
  font-size:var(--size16);
  border-bottom: 1px solid #EBEEF5;
  margin-right:40px;
  overflow: hidden;
  padding:20px 0 15px 15px;
}
.grouplist li i{
  float:left;
}
.grouplist li div{
  float:left;
  line-height:38px;
  font-weight: bolder;
  padding: 0 0 0 10px;
}
.grouplist li div span a{
  font-weight: bolder;
  text-decoration: none;
  padding: 0;
}
.grouplist li div a{
  color:#000;
  font-weight: normal;
  text-decoration: none;
  padding: 0 0 0 30px;
}
.grouplist li div span.disable{
    color: #999;
    font-weight: normal;
    text-decoration: none;
    padding: 0 0 0 30px;
}
.grouplist li div span.disable1{
    color: #999;
}
.grouplist li div a:hover{
  color: #f60;
  text-decoration:underline;
}
</style>
